<template>
  <div class="header">
    <div class="left">
      <div @click="switchNav">
        <i class="el-icon-s-operation"></i>
      </div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-dropdown :hide-on-click="false" @command="handleCommand">
        <span class="el-dropdown-link">
          <span>{{info.userName}}</span>
          <img :src="BASE_URL + info.avatarUrl" alt="">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="message" @click="$refs.message.show()">
        <i class="el-icon-message-solid"></i>
        <div class="active" v-if="messageList.length !== 0"></div>
      </div>
    </div>

    <Message ref="message" :messageList="messageList"/>
  </div>
</template>

<script>
  import {BASE_URL} from "../../settings"
  import Message from "../Message/Message"
  import {getMessageList, getPersonalInfo} from "../../api/api"
  import {mapState} from "vuex"

  export default {
    name: "Header",
    components: {Message},
    created() {
      this.linkWs()
      this.getList()
      this.getPersonalInfo()
    },
    data() {
      return {
        BASE_URL,
        messageList: [],
        info: {}
      }
    },
    methods: {
      //点击下拉框事件
      handleCommand(command) {
        if (command === 'personal') {
          this.toPersonal()
        } else if (command === 'logout') {
          this.logout()
        }
      },
      //退出登录
      logout() {
        window.sessionStorage.removeItem('token')
        this.$router.push('/login')
      },
      //个人中心
      toPersonal() {
        this.$router.push('/personal')
      },
      //获取用户信息
      async getPersonalInfo() {
        await this.$store.dispatch('getUser')
        this.info = this.$store.state.userInfo
      },
      //收起导航
      switchNav() {
        this.$store.state.isCollapse = !this.$store.state.isCollapse
      },
      //查询消息列表
      async getList() {
        const res = await getMessageList()
        this.messageList = res.data
      },
      //订单提醒
      linkWs() {
        const that = this
        const mId = '123456'
        const webs = new WebSocket(`ws://localhost:5000/common/orderRemind?id=${mId}`)
        webs.onopen = () => {
          console.log('连接成功')
        }
        webs.onmessage = evt => {
          const data = JSON.parse(evt.data)
          if (!data._id) return
          this.$notify.info({
            title: '消息',
            message: '您有一条新的订单，请及时查收!',
            onClick() {
              that.$router.push(`order_details?id=${data._id}`)
              this.close()
            }
          })
          that.getList()
        }
      }
    },
    computed: {
      ...mapState(['isCollapse'])
    }
  }
</script>

<style scoped lang="scss">
  .header {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .el-breadcrumb {
        margin-left: 20px;
      }

      i {
        font-size: 24px;
        cursor: pointer;
      }
    }

    .right {
      padding-right: 50px;

      .el-dropdown-link {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        img {
          margin: 0 5px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .message {
        display: inline-block;
        margin-left: 10px;
        position: relative;
        cursor: pointer;

        i {
          font-size: 20px;
        }

        .active {
          position: absolute;
          top: 0;
          right: 0;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: red;
        }
      }
    }
  }
</style>
